{% block as_form %}
    <input name="{{ field.key }}" id="{{ field.key }}"
            class="list-str form-control" data-choices data-choices-limit="Required Limit" data-choices-removeItem
           value="{% if field.val %}{{ ','.join(field.val) }}{% endif %}"
    />
    <script>
    (async function () {
            let element = document.getElementById("{{ field.key }}");
            let choices = new Choices(element, {
                placeholderValue: "Enter {{ field.title }}",
                multiple: true,
                removeItemButton: true
            });
        })();
    </script>
{% endblock %}
{% block as_view %}
    <input name="{{ field.key }}" id="{{ field.key }}"
            class="list_str form-control" data-choices data-choices-text-disabled-true
           value="{% if field.val %}{{ ','.join(field.val) }}{% endif %}"
    />
    <script>
    (async function () {
            let element = document.getElementById("{{ field.key }}");
            let choices = new Choices(element);
            choices.disable()
        })();
    </script>
{% endblock %}

{% block as_table_header %}
    {{ field.title }}
{% endblock %}

{% block as_table %}
    {{ field.val if field.val else '' }}
{% endblock %}
